<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>欢迎来到西米杂货店</title>
	<script type="text/javascript">
		var date=new Date();
		document.write("生活不在别处，当下即是全部&nbsp;"+date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日&nbsp;&nbsp");
		var day=date.getDay();
		switch(day)
		{
			case 0:
			d="星期天";
			break;
			case 1:
			d="星期一";
			break;
			case 2:
			d="星期二";
			break;
			case 3:
			d="星期三";
			break;
			case 4:
			d="星期四";
			break;
			case 5:
			d="星期五";
			break;
			default:
			d="星期六";
		}
		document.write(d+"&nbsp;");
		if (date.getHours()<10)
		{
			document.write("0");
		}
		document.write(date.getHours()+":");
		if (date.getMinutes()<10)
		{
			document.write("0");
		}
		document.write(date.getMinutes());
		if (date.getSconds()<10)
		{
			document.write("0");
		}


		function showTime()
		{
			var date =new Date();
			var str;
			str=date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+"&nbsp;";
			str+=full(data.getHours())+":"+full(date.getMinutes());
			document.getElementById("time").innerHTML=str;
		}
		function full(n)
		{
			if (n<10) {n="0"+n;}
			return n;
		}
		window.setInterval("showTime()",1000);

	</script>
	<script language="javascript">
    function change(type)
    {
	    var img=document.getElementById("myImg").src;
	    var id=parseInt(img.substr(img.length-5,1));
	    if(type==1)
	    {
		  id=(id-1+10)%10;
	    }
	    else
	    {
		  id=(id+1)%10;
	    }
	    document.getElementById("myImg").src="../static/myImg/"+id+".jpg";
    }
</script>

	<style type="text/css">
		*
		{

			padding: 0;
			margin:10;
			background-color: #F0F8FF;
		}
		body
		{
			width: 1200px;
			font-size: 14px;

		}
		#header
		{
			height: 100px;
			background-color: #FFFFFF;
			margin-bottom: 5px;
			border-radius: 10px;
			background-size: 100px;
			background-color: #F0F8FF;
		}
		#aside
		{
			float: left;
			width:100px;
			height: 500px;

		}
		#aside1
		{
			float: left;
			width:300px;
			height: 500px;

		}
		#aside2
		{
			float: left;
			width:100px;
			height: 500px;

		}
		#aside3
		{
			float: left;
			width:500px;
			height: 500px;

		}
		#content
		{
			float: right;
			width: 500px;
			height: 500px;
			background-color: #6cf;
		}
		.div
		{
			height: 100px;
			width:100px;
			float:left;
			margin: 5px;
			padding: 0px;
		}
		.bg
		{
			background-image:url(../static/myImg/0.jpg);
			background-position: 50% 50%;
			background-size: cover;
		}
		 p
	    {
	    	font-size: 20pt;
	    	font-family: 楷体;
	    	color:#C0C0C0;
	    }
	   ul
	   {
            list-style:none;
       }
       ul li
       {
       	    float:left;
            line-height:40px;
            text-align:center;
            position:relative;
       }
       a
       {
            text-decoration:none;
	        color:#C0C0C0;
	        display:block;
	        font-size: 20px;

       }
       a:hover
       {
            background-color:#C0C0C0;
	        color:#FFFFFF;
	        width:90px;
	        height:40px;

       }

       ul li ul li
       {
            float:none;
	        background-color:#EEEEEE;
       }
       ul li ul
       {
            position:absolute;
	        top:40px;
	        left:0px;
	        display:none;
	        width: 90px;

       }
       ul li ul li a:link,ul li ul li a:visited
       {
            background-color:#EEEEEE;
       }
       ul li ul li a:hover
       {
            background-color:#009933;
       }
/*鼠标滑过一级菜单的元素时显示下拉菜单*/
       ul li:hover ul
       {
            display:block;
       }

       #piclist
		{
			margin:100px auto;
		}
		.picbox
		{

			border-radius: 10px;
			float:left;
			width:200px;
			height:200px;
			-webkit-transform-style: preserve-3d;
			-moz-transform-style: preserve-3d;
			-transform-style: preserve-3d;
			-ms-transform-style: preserve-3d;
			transition: 1.5s;

		}
		.picbox:hover
		{
			transform: rotateY(180deg);
		}
		.face
		{
			width:190px;
			height:190px;
			position: absolute;
		}
		.front
		{
			border:2px;
		}
		.back
		{
			-webkit-transform: rotateY(180deg);
			-o-transform: rotateY(180deg);
			-transform: rotateY(180deg);
			-ms-transform: rotateY(180deg);
		}

	</style>
</head>
<body>
	<div id="header">
		<div class="div bg" style="border-radius: 100px;box-shadow: 2px 2px 6px 1px rgba(99,0,255,0.7);"></div></br>
		<ul>
	          <li><a href="#">&nbsp;&nbsp;首页^&nbsp;&nbsp;</a></li>

		      <li><a href="#">人物专题^&nbsp;&nbsp;</a>
		      <ul>
			      <li><a href="https://mp.weixin.qq.com/s/AM6MGBe28YXe6XwzE3kJlA" style="font-size: 10px">柠檬精女士</a></li>
			      <li><a href="https://mp.weixin.qq.com/s/f0ukS123z4aSPUeRd1-EOA" style="font-size: 10px">阳光灿烂</a></li>
			      <li><a href="https://mp.weixin.qq.com/s/UEnICg8bdopdu3oboeT-Zg" style="font-size: 10px">楚门</a></li>
			      <li><a href="https://mp.weixin.qq.com/s/FZq1CIRqvDVGMQqHvp0Itg" style="font-size: 10px">情书</a></li>
			      <li><a href="https://mp.weixin.qq.com/s/oLLkoN685wpGr4bN42VaJw" style="font-size: 10px">体育人生</a></li>
			      <li><a href="https://mp.weixin.qq.com/s/2IPMtPNKh7XTxakBvOqaNg" style="font-size: 10px">幾米</a></li>
		      </ul>
		      </li>
		      <li><a href="#">日常生活^</a>
		      <ul>
			      <li><a href="https://mp.weixin.qq.com/s/6y4-VaddiWYPgwK3GunhYw" style="font-size: 10px">夏天coming</a></li>
			      <li><a href="https://mp.weixin.qq.com/s/Ojnow6tds96RYKqBT2cL2g" style="font-size: 10px">一个人生活</a></li>
			      <li><a href="https://mp.weixin.qq.com/s/BC5dC_GcLBIWpyaAyu6S4w" style="font-size: 10px">Live Moves On</a></li>
			      <li><a href="https://mp.weixin.qq.com/s/6y4-VaddiWYPgwK3GunhYw" style="font-size: 10px">且听风吟</a></li>
			      <li><a href="https://mp.weixin.qq.com/s/ukdxhG6owFlZYv5VfWf-0A" style="font-size: 10px">Lost My Mind</a></li>
			      <li><a href="https://mp.weixin.qq.com/s/2aC127OyIZzpFkusUCILWw" style="font-size: 10px">压箱底</a></li>
		      </ul>
		     </li>
		     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="../static/myImg/图标6.png" height="30px" border="0" >&nbsp;<img src="../static/myImg/图标3.png" height="30px" border="0" >&nbsp;<img src="../static/myImg/图标4.png" height="30px" border="0" >&nbsp;<img src="../static/myImg/图标5.png" height="30px" border="0" ></p>
        </ul>
	</div>
	<div id="aside">
		<p>&nbsp;&nbsp;&nbsp;&nbsp;</p>
		<img src="../static/myImg/图标1.png" height="50px" border="0" >
		<p>&nbsp;&nbsp;&nbsp;&nbsp;</p>
		<img src="../static/myImg/图标1.png" height="50px" border="0" >
		<p>&nbsp;&nbsp;&nbsp;&nbsp;</p>
		<img src="../static/myImg/图标1.png" height="50px" border="0" >
	</div>
	<div id="aside1">
	<p>欢迎来到西米杂货店:</p>
	<p>&nbsp;&nbsp;西米杂货店贩卖正能量和生活中的小浪漫，仔细挖掘，会有意想不到的小惊喜哦~面包屑导航栏的文章都是公众号原创作品，如果有意转载，记得联系作者哦！（动手滑滑下面的图标看看！↓）</p>
    <p>
        <footer class="text-muted py-5">
  <div class="container">
    <p class="float-end mb-1">
      <a href="http://127.0.0.1:5000/"><font color="#0000FF">点击回到首页</font></a>
    </p>
  </div>
    	<div class="picbox">
			<div class="face front">
				<img src="../static/myImg/图片2.png" height="200px" border="0">
			</div>
			<div class="face back">
				<img src="../static/myImg/图片3.png" height="200px" border="0">
			</div>
		</div>
    </p>
    </div>
    <div id="aside2">
    </div>
	<div id="aside3">
		<marquee onmouseover="this.stop();"onmouseout="this.star();"style="font-size: 28px">欢迎光临西米杂货店公众号网站！</marquee>
	<div style="width:520px; height:400px; margin:100px auto;">
    <input type="button" style="height:300px; width:50px; vertical-align:middle;" value="<<" onclick="change(1);"/>
    <img src="../static/myImg/0.jpg" style="margin-left:5px; margin-right:5px; height:300px; vertical-align:middle;" id="myImg"/>
    <input type="button" style="height:300px; width:50px; vertical-align:middle;" value=">>" onclick="change(2);"/>
    </div>
	</div>

</body>
</html>